﻿<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>安全视频监控系统演示Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/style.css" type="text/css" rel="stylesheet" media="all">
<link href="css/flexslider.css" type="text/css" rel="stylesheet" media="screen">
<link href="css/tipsy.css" type="text/css" rel="stylesheet" media="screen">
<link href="css/prettyPhoto.css" type="text/css" rel="stylesheet" media="screen">
<link href="css/jcarousel.css" type="text/css" rel="stylesheet" media="screen" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700|Arvo:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<!--<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>-->
<script type="text/javascript" src="js/jquery.flexslider-min.js"></script><!--featured slider-->
<script type="text/javascript" src="js/jquery.tipsy.js"></script><!--tooltip-->
<script type="text/javascript" src="js/css3-mediaqueries.js"></script><!--mediaqueries-->
<script type="text/javascript" src="js/jquery.visualNav.min.js"></script><!--navigation-->
<script type="text/javascript" src="js/jquery.isotope.min.js"></script><!--filterable work-->
<script type="text/javascript" src="js/jquery.prettyPhoto.js"></script><!--pretty photo-->
<script type="text/javascript" src="js/jquery.jcarousel.min.js"> </script><!--latest work-->
<script type="text/javascript">
	function mycarousel_initCallback(carousel)
{
    // Disable autoscrolling if the user clicks the prev or next button.
    carousel.buttonNext.bind('click', function() {
        carousel.startAuto(0);
    });

    carousel.buttonPrev.bind('click', function() {
        carousel.startAuto(0);
    });

    // Pause autoscrolling if the user moves with the cursor over the clip.
    carousel.clip.hover(function() {
        carousel.stopAuto();
    }, function() {
        carousel.startAuto();
    });
};
jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
        auto: 2,
        wrap: 'last',
        initCallback: mycarousel_initCallback
    });
});
</script>

<script type="text/javascript"> 

function startNVR()
{var WSH = new ActiveXObject("WScript.Shell"); 
WSH.Run("D:\\html\\security_camera\\sip\\nvr_auth.bat");}

function startIPC()
{var WSH = new ActiveXObject("WScript.Shell"); 
WSH.Run("D:\\html\\security_camera\\sip\\start_ipc.bat");}

function killffmpeg()
{var WSH = new ActiveXObject("WScript.Shell"); 
WSH.Run("D:\\html\\security_camera\\sip\\end.bat");}

</script>


<!--BEGIN:Accordion	-->
<script type="text/javascript" src="js/jquery-ui-1.8.17.custom.min.js"></script><!--accordion-->
<script type="text/javascript">
	$(function() {
		$( "#accordion" ).accordion({
		header: "h4",
		autoHeight: false, 
		});
	});
</script>

<!--BEGIN:mosaic-->
<link rel="stylesheet" href="css/mosaic.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/mosaic.1.0.1.js"></script>
<script type="text/javascript">  
			jQuery(function($){
				$('.views').mosaic({
					opacity		:	0.8			//Opacity for overlay (0-1)
				});	    
		    });
</script>

<!--gallery-->
<link rel="stylesheet" type="text/css" href="css/elastislide.css" media="screen" />
<script id="img-wrapper-tmpl" type="text/x-jquery-tmpl">	
			<div class="rg-image-wrapper">
				{{if itemsCount > 1}}
					<div class="rg-image-nav">
						<a href="#" class="rg-image-nav-prev">Previous Image</a>
						<a href="#" class="rg-image-nav-next">Next Image</a>
					</div>
				{{/if}}
				<div class="rg-image"></div>
				<div class="rg-loading"></div>
				<div class="rg-caption-wrapper">
					<div class="rg-caption" style="display:none;">
						<p></p>
					</div>
				</div>
			</div>
		</script>

<!--tab-->    
<script src="js/organictabs.jquery.js"></script>
<script>
        $(function() {
            
            $("#tab").organicTabs({
                "speed": 200
            });
    
        });
</script>

<!--elastic slider-->
<script type="text/javascript" src="js/jquery.eislideshow.js"></script>
        <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
        <script type="text/javascript">
            $(function() {
                $('#ei-slider').eislideshow({
					animation			: 'center',
					autoplay			: true,
					slideshow_interval	: 3000,
					titlesFactor		: 0
                });
            });
        </script>

<!--GOOGLE MAP PLUGIN-->
<script type="text/javascript">
			function initialize() {
				var latlng = new google.maps.LatLng(8.48333, 124.65000);
				var settings = {
					zoom: 15,
					center: latlng,
					mapTypeControl: true,
					mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
					navigationControl: true,
					navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
					mapTypeId: google.maps.MapTypeId.ROADMAP};
				var map = new google.maps.Map(document.getElementById("map_canvas"), settings);
				
				var infowindow = new google.maps.InfoWindow({
					content: contentString
				});
				
				var companyImage = new google.maps.MarkerImage('images/logo.png',
					new google.maps.Size(100,50),
					new google.maps.Point(0,0),
					new google.maps.Point(50,50)
				);

				var companyShadow = new google.maps.MarkerImage('images/logo_shadow.html',
					new google.maps.Size(130,50),
					new google.maps.Point(0,0),
					new google.maps.Point(65, 50));

				var companyPos = new google.maps.LatLng(8.48333, 124.65000);

				var companyMarker = new google.maps.Marker({
					position: companyPos,
					map: map,
					icon: companyImage,
					shadow: companyShadow,
					title:"Høgenhaug",
					zIndex: 3});
				
				var trainImage = new google.maps.MarkerImage('images/train.html',
					new google.maps.Size(50,50),
					new google.maps.Point(0,0),
					new google.maps.Point(50,50)
				);

				var trainShadow = new google.maps.MarkerImage('images/train_shadow.html',
					new google.maps.Size(70,50),
					new google.maps.Point(0,0),
					new google.maps.Point(60, 50)
				);

				var trainPos = new google.maps.LatLng(57.0429, 9.9173);

				var trainMarker = new google.maps.Marker({
					position: trainPos,
					map: map,
					icon: trainImage,
					shadow: trainShadow,
					title:"Train Station",
					zIndex: 2
				});

				var parkingImage = new google.maps.MarkerImage('images/parking.html',
					new google.maps.Size(50,50),
					new google.maps.Point(0,0),
					new google.maps.Point(50,50)
				);

				var parkingShadow = new google.maps.MarkerImage('images/parking_shadow.html',
					new google.maps.Size(70,50),
					new google.maps.Point(0,0),
					new google.maps.Point(60, 50)
				);

				var parkingPos = new google.maps.LatLng(57.0437, 9.9147);

				var parkingMarker = new google.maps.Marker({
					position: parkingPos,
					map: map,
					icon: parkingImage,
					shadow: parkingShadow,
					title:"Parking Lot",
					zIndex: 1
				});
				
				google.maps.event.addListener(companyMarker, 'click', function() {
					infowindow.open(map,companyMarker);
				});
			}
		</script>


<!--[if lt IE 9]>
<script src="js/html5.js" type="text/javascript"></script>
<![endif]-->
<script type="text/javascript" src="js/custom.js"></script>
</head>

<body onLoad="initialize()">
<div id="page">
  <div id="page_container">
    <aside id="header">
   
      <h1>安全视频监控系统</h1>
      <nav id="main-nav">
        <ul>
          <li><a class="menu" href="#home">系统介绍</a></li>
          <li><a class="menu" href="#sip">SIP认证过程演示</a></li>
        </ul>
      </nav>
      <div id="copy-right">
        <p>&copy; Copyright 2014 <br>
         &copy; R&D Center of Internet of Things  Security All rights reserved.</p>
      </div>
    </aside>
    <section id="main">
      <div id="home" class="content">
      	<h2 class="intro">安全视频监控系统演示demo </h2>
      
        <hr class="divider">
        <div class="column">
          <div class="one-half"> <span class="dropcap">1</span>
            <p><span class="title">设备实体的双向认证</span></p>
            <p>确保安全的信息采集设备接入可信的网络</p>
          </div>
          <div class="one-half last"> <span class="dropcap">2</span>
            <p><span class="title">视频流的加密及存储</span></p>
            <p>确保采集信息能够安全可靠的进行传输和存储</p>
          </div>
        </div>

          <div>
          <img src="images/introduce/sip.jpg"/>
        </div>
        <!-- END: .column -->
      </div>
      <!-- END: .content -->

    <div id="sip" class="content">
        <div class="page_title">
          <h2><span>SIP认证演示</span></h2>
        </div>
        <h3>系统启动过程：</h3>
        <img src="images/introduce/demo_arch_2013.png"/><br>
     <h4>第一步：启动所有服务器:<br>1.raidus服务器<br>2.SIP服务器<br>3.NVR上的hadoop服务<br>4.NVR上的ffserver<br>5.NVR上的存储程序<br>   
<h4>第二步：<button onclick="startNVR()">启动NVR认证</button><br>NVR与SIP服务器完成双向认证，完成密钥协商，等待摄像头的接入
<h4>第三步：<button onclick="startIPC()">启动IPC</button><br>启动摄像头，与SIP服务器完成认证，完成密钥协商，NVR与IPC进行快速认证，认证通过后开启视频流传输
<h4>第四步：<button onclick="killffmpeg()">关闭视频传输</button><br>

        </h4>
        <br>

      </div><!-- END: .content -->
    </section>
  </div>
</div>
<!--gallery responsive-->
<script type="text/javascript" src="js/jquery.tmpl.min.js"></script> 
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script> 
<script type="text/javascript" src="js/jquery.elastislide.js"></script> 
<script type="text/javascript" src="js/gallery.js"></script>

<script type="text/javascript">

$(document).ready(function(){
$("#ajax-contact-form").submit(function(){

var str = $(this).serialize();

   $.ajax({
   type: "POST",
   url: "contact.php",
   data: str,
   success: function(msg){
    
$("#note").ajaxComplete(function(event, request, settings){

if(msg == 'OK') // Message Sent? Show the 'Thank You' message and hide the form
{
result = '<div class="notification_ok">Your message has been sent. Thank you!</div>';
$("#fields").hide();
}
else
{
result = '<ul class="error">'+msg+'</ul>';
}

$(this).html(result);

});

}

 });

return false;

});

});
</script> 

</body>
</html>
